<template>
  <div class="avatar-upload">
    <div class="avatar-preview" @click="triggerFileInput">
      <img 
        :src="currentAvatar || defaultAvatar" 
        alt="头像"
        class="avatar-image"
      />
      <div class="upload-overlay">
        <div class="upload-icon">
          <i class="iconfont icon-camera"></i>
          <span>点击上传</span>
        </div>
      </div>
    </div>
    
    <input
      ref="fileInput"
      type="file"
      accept="image/*"
      @change="handleFileSelect"
      style="display: none;"
    />
<!--     
    <div class="upload-tips">
      <p>支持 JPG、PNG、GIF、WEBP 格式</p>
      <p>文件大小不超过 2MB</p>
    </div> -->
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { message } from 'ant-design-vue'
import { uploadAvatar } from '~/api/auth'

// Props
const props = defineProps({
  avatar: {
    type: String,
    default: ''
  }
})

// Emits
const emit = defineEmits(['success'])

// 响应式数据
const fileInput = ref(null)
const uploading = ref(false)

// 计算属性
const currentAvatar = computed(() => props.avatar)

// 默认头像
const defaultAvatar = '/images/default-avatar.png'

// 触发文件选择
const triggerFileInput = () => {
  if (!uploading.value) {
    fileInput.value?.click()
  }
}

// 处理文件选择
const handleFileSelect = async (event) => {
  const file = event.target.files[0]
  if (!file) return

  // 验证文件类型
  const allowedTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif', 'image/webp']
  if (!allowedTypes.includes(file.type)) {
    message.error('请选择有效的图片文件 (JPG, PNG, GIF, WEBP)')
    return
  }

  // 验证文件大小 (2MB)
  if (file.size > 2 * 1024 * 1024) {
    message.error('文件大小不能超过 2MB')
    return
  }

  // 上传文件
  await uploadFile(file)
  
  // 清空文件输入
  event.target.value = ''
}

// 上传文件
const uploadFile = async (file) => {
  uploading.value = true
  
  try {
    const result = await uploadAvatar(file)
    
    if (result.status === 'success') {
      message.success('头像上传成功')
      emit('success', result.data)
    } else {
      message.error(result.message || '头像上传失败')
    }
  } catch (error) {
    console.error('头像上传错误:', error)
    message.error('头像上传失败，请稍后重试')
  } finally {
    uploading.value = false
  }
}
</script>

<style scoped lang="scss">
.avatar-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;

  .avatar-preview {
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid #e8e8e8;
    transition: all 0.3s ease;

    &:hover {
      border-color: #1890ff;
      
      .upload-overlay {
        opacity: 1;
      }
    }

    .avatar-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .upload-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.6);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: opacity 0.3s ease;

      .upload-icon {
        color: white;
        text-align: center;
        font-size: 12px;

        .iconfont {
          font-size: 24px;
          display: block;
          margin-bottom: 4px;
        }

        span {
          display: block;
        }
      }
    }
  }

  .upload-tips {
    text-align: center;
    color: #666;
    font-size: 12px;
    line-height: 1.4;

    p {
      margin: 2px 0;
    }
  }
}
</style> 